<template>
	<div>
		<el-form :inline="true" :model="queryForm" size="small" ref="queryForm" class="demo-form-inline">
			<el-form-item label="岗位编码:" prop="posCode">
				<el-cascader v-model="queryForm.posCode" placeholder="请选择" :show-all-levels="false" :options="posData"
					:props="posProps">
				</el-cascader>
			</el-form-item>
			<el-form-item label="岗位名称:" prop="posName">
				<el-input v-model="queryForm.posName"></el-input>
			</el-form-item>
			<el-form-item label="岗位状态:" prop="posState">
				<el-select v-model="queryForm.posState" placeholder="请选择">
					<el-option v-for="item in stateOptions" :key="item.value" :label="item.label" :value="item.value">
						<span style="float: left">{{ item.label }}</span>
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="searchTableData()" size="mini" icon="el-icon-search" plain>搜索
				</el-button>
				<el-button icon="el-icon-refresh" @click="resetQueryForm()" size="mini" plain>重置</el-button>
			</el-form-item>
		</el-form>
		<div>
			<el-button type="primary" icon="el-icon-plus" @click="addPosButtonClick()" size="mini" plain>新增
			</el-button>
			<el-button type="success" icon="el-icon-edit" @click="editPosButtonClick()" size="mini" plain
				:disabled="editButtonState">修改
			</el-button>
			<el-button type="danger" icon="el-icon-delete" @click="delPosButtonClick()" size="mini" plain
				:disabled="delsButtonState">删除</el-button>
			<el-button type="info" icon="el-icon-upload2" size="mini" plain>导入</el-button>
			<el-button type="warning" icon="el-icon-download" size="mini" plain>导出</el-button>
		</div>

		<el-table  ref="multipleTable" :data="tableData" tooltip-effect="dark"
			style="width: 100%;" @selection-change="handleSelectionChange">
				<el-table-column type="selection" width="55">
				</el-table-column>
				<el-table-column prop="posId" label="岗位编号" width="180">
				</el-table-column>
				<el-table-column prop="posCode" label="岗位编码">
				</el-table-column>
				<el-table-column prop="posName" label="岗位名称">
				</el-table-column>
				<el-table-column prop="posState" label="状态">
					<template v-slot="scope">
						<div v-if="scope.row.posState == 0">
							<el-button size="mini" type="success" plain>正常</el-button>
						</div>
						<div v-else="scope.row.posState == 1">
							<el-button size="mini" type="danger" plain>停用</el-button>
						</div>
					</template>
					</view>
				</el-table-column>
				<el-table-column prop="remark" label="备注">
				</el-table-column>
			</el-table-column>
		</el-table>
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
			:current-page="queryForm.curPage" :page-sizes="[3, 5, 8]" :page-size="queryForm.pageSize"
			layout="->, total, sizes, prev, pager, next, jumper" :total="totalNum">
		</el-pagination>
		<el-dialog title="新增岗位" :visible.sync="addFormVisible" width="40%">
			<el-form :model="addPosForm" hide-required-asterisk ref="addPosForm" label-width="120px">
				<el-form-item label="上级岗位" label-width="80px" prop="posName">
					<el-cascader v-model="addPosForm.pid" placeholder="请选择" :show-all-levels="false" :options="posData"
						:props="NameData">
					</el-cascader>
				</el-form-item>
				<el-form-item label="岗位名称" label-width="80px">
					<el-input v-model="addPosForm.posName" placeholder="请输入岗位名称"></el-input>
				</el-form-item>
				<el-form-item label="岗位编码" label-width="80px">
					<el-input v-model="addPosForm.posCode" placeholder="请输入岗位编码"></el-input>
				</el-form-item>
				<el-form-item label="岗位状态:" label-width="80px" prop="posState">
					<el-select v-model="addPosForm.posState" placeholder="请选择">
						<el-option v-for="item in stateOptions" :key="item.value" :label="item.label"
							:value="item.value">
							<span style="float: left">{{ item.label }}</span>
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="备注" label-width="80px">
					<el-input type="textarea" :autosize="{ minRows: 0, maxRows: 100}" placeholder="请输入内容"
						v-model="addPosForm.remark">
					</el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="addFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="addPos()">确 定</el-button>
			</span>
		</el-dialog>
		<el-dialog title="编辑用户" :visible.sync="editFormVisible" width="40%">
			<el-form :model="editPosForm" hide-required-asterisk ref="editPosForm" label-width="135px">
				<el-form-item label="上级岗位" label-width="80px" prop="posName">
					<el-cascader v-model="editPosForm.pid" placeholder="请选择上级岗位" :show-all-levels="false"
						:options="posNameData" :props="NameData">
					</el-cascader>
				</el-form-item>
				<el-form-item label="岗位名称" label-width="80px">
					<el-input v-model="editPosForm.posName" placeholder="请输入岗位名称"></el-input>
				</el-form-item>
				<el-form-item label="岗位编码" label-width="80px">
					<el-input v-model="editPosForm.posCode" placeholder="请输入岗位编码"></el-input>
				</el-form-item>
				<el-form-item label="岗位状态:" label-width="80px" prop="posState">
					<el-select v-model="editPosForm.posState" placeholder="请选择">
						<el-option v-for="item in stateOptions" :key="item.value" :label="item.label"
							:value="item.value">
							<span style="float: left">{{ item.label }}</span>
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="备注" label-width="80px">
					<el-input type="textarea" :autosize="{ minRows: 0, maxRows: 100}" placeholder="请输入内容"
						v-model="editPosForm.remark">
					</el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="cancelEditPos()">取 消</el-button>
				<el-button type="primary" @click="editPos()">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				delsButtonState: true,
				editButtonState: true,
				// 编辑框的可见性
				editFormVisible: false,
				// 新增框的可见性
				addFormVisible: false,
				// 新增数据框数据内容
				addPosForm: {
					posId: '',
					posCode: '',
					posName: '',
					posState: '',
					remark: '',
					pid: ''
				},
				// 修改数据框数据内容
				editPosForm: {
					posId: '',
					posCode: '',
					posName: '',
					posState: '',
					remark: '',
					pid: ''
				},
				//树形岗位展示
				posData: [],
				posNameData: [],
				//岗位编码下拉选择框
				CodeData: [],
				NameData: {
					label: 'posName',
					value: 'posId',
					children: 'childs',
					emitPath: false,
					checkStrictly: true
				},
				posProps: {
					label: 'posCode',
					value: 'posCode',
					children: 'childs',
					emitPath: false,
					checkStrictly: true
				},
				// 查询数据
				queryForm: {
					posId: '',
					posCode: '',
					posName: '',
					posState: '',
					curPage: 1,
					pageSize: 5
				},
				//表格中一次选中的多个数据
				multipleSelection: [],
				tableData: [],
				//岗位状态下拉选择
				stateOptions: [{
					value: "0",
					label: "正常"
				}, {
					value: "1",
					label: "停用"
				}],
				// tabledata中总的数量
				totalNum: 0,
				value: []
			}
		},
		methods: {
			// 删除按钮点击
			delPosButtonClick() {
				let arr = [];
				let data = this.multipleSelection;
				for (let i = 0; i < data.length; i++) {
					arr[i] = data[i].posId;
				}
				console.log(arr);
				this.$confirm('此操作将永久删除选中的用户数据, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$axios.delete(`sysPos/delPos/${arr}`)
						.then(resp => {
							console.log(resp);
							this.getSelectTableData(this.queryForm);
						});
					this.$message({
						type: 'success',
						message: '删除成功!'
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			// 修改弹出框确定触发的事件
			editPos() {
				this.editFormVisible = false;
				console.log(this.editPosForm);
				this.$axios.put(`sysPos/updatePos`, this.editPosForm)
					.then(resp => {
						if (resp.code == 20000) {
							this.$message({
								type: 'success',
								message: '修改成功'
							});
						} else {
							this.$message({
								type: 'error',
								message: '修改失败'
							});
						}
						this.getSelectTableData(this.queryForm);
					});

			},
			cancelEditPos() {
				this.editFormVisible = false;
				this.getSelectTableData(this.queryForm);
			},
			//修改按钮点击
			editPosButtonClick() {
				this.editFormVisible = true;
				this.editPosForm = this.multipleSelection[0];
				this.getOtherParam(this.editPosForm.posId);
			},
			getOtherParam(posId) {
				console.log(posId);
				this.$axios.get(`sysPos/${posId}`)
					.then(resp => {
						console.log(resp);

					});
			},

			//新增按钮触发的事件
			addPosButtonClick() {
				this.resetaddFrom();
				this.addFormVisible = true;

			},
			//重置新增表单
			resetaddFrom() {
				this.addPosForm = {
					posId: '',
					posCode: '',
					posName: '',
					posState: '',
					remark: '',
					pid: ''
				}
			},

			// 增加一个岗位
			addPos() {
				this.addFormVisible = false;
				console.log(this.addPosForm);
				this.$axios.post('/sysPos/addPos', this.addPosForm)
					.then(resp => {
						console.log(resp);
						if (resp.code == 20000) {
							this.$message({
								type: 'success',
								message: '新增成功'
							});
						} else {
							this.$message({
								type: 'error',
								message: '新增失败'
							});
						}
						this.getSelectTableData(this.queryForm);
					});
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
				if (val.length == 1) {
					this.editButtonState = false;
					this.delsButtonState = false;
				} else if (val.length > 1) {
					this.delsButtonState = false;
					this.editButtonState = true;
				} else {
					this.editButtonState = true;
					this.delsButtonState = true;
				}
			},
			//改变每页显示的条数
			handleSizeChange(val) {
				this.queryForm.pageSize = val;
				this.queryForm.pageNum = 1;
				this.getSelectTableData(this.queryForm);
			},
			// 翻页
			handleCurrentChange(val) {
				this.queryForm.pageNum = val;
				this.getSelectTableData(this.queryForm);
			},

			//点击搜索触发的事件
			searchTableData() {
				console.log(this.queryForm);
				this.getSelectTableData(this.queryForm);
			},
			resetPosData() {
				this.queryForm = {
					posId: '',
					posCode: '',
					posName: '',
					posState: '',
					curPage: 1,
					pageSize: 5

				}
			},
			// 重置查询框
			resetQueryForm() {
				this.value1 = [];
				this.resetPosData();
				this.getSelectTableData(this.queryForm);
			},

			// 得到编码的树形图
			getCodeTree() {
				this.$axios.get("/sysPos/buildTree")
					.then(resp => {
						if (resp.code == 20000) {
							this.data = resp.data.posCode;
						}
					});
			},

			getTableData() {
				this.$axios.get("/sysPos/getAll")
					.then(resp => {
						console.log(resp);
						this.tableData = resp.list;
						this.totalNum = resp.total;
					})
			},
			getSelectTableData(searchData) {
				this.$axios.get("/sysPos/selectAll", {
						params: searchData
					})
					.then(resp => {
						console.log(resp);
						this.tableData = resp.list;
						this.totalNum = resp.total;
					})
			}

		},
		mounted() {
			this.getTableData();
			this.getSelectTableData(this.queryForm);
			this.$axios.get("/sysPos/buildTree")
				.then(resp => {
					console.log(resp);
					if (resp.code == 20000) {
						console.log(resp);

						this.posData = resp.data;

					}
				});

		},
	}
</script>
<style>
	.bg-purple {
		background: #d3dce6;
	}

	.bg-purple-light {
		background: #e5e9f2;
	}

	.grid-content {
		border-radius: 4px;
		min-height: 36px;
	}

	.fr {
		float: right;
	}

	.wd {
		width: 270px;
	}

	.wd1>.el-input>.el-input__inner::placeholder {
		color: rgba(0, 0, 0, 0.685) !important;
	}

	.el-input {
		width: 220px;
	}
</style>